<template>
    <div class="mainMetro" v-if="showData">
        <canvas  id="canvass" style="position:absolute"></canvas >
        <div class="headers" style="z-index:1000">
            <div style="float:left;font-size:0.3rem" @click="backs">返回</div>
            <img :src='logo' v-if="logo!=''" style='vertical-align: middle;'/> <span :style="{color:color}"></span>{{title}}
            <div class='users' >
                                
                <el-dropdown style="color:#fff">
                    <span class="el-dropdown-link" :style="{fontSize:'14px',cursor:'pointer'}">
                        <div><i class='fa fa-user-circle' :style="{fontSize:'25px'}"></i></div>
                        {{username}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-lock" @click.native="updatePwd()">修改密码</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-user" @click.native="logout()">退出登陆</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-user" @click.native="freshs()">刷新</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            
            
            </div>
        </div>
        <div class="header_title">
           
        </div>
        <div class="contents">
                <div  style="width:100%;height:100%">
                    <grid-layout
                        :layout.sync="data"
                        width="100%"
                        :col-num="12"
                        :row-height="colHeight"
                        :is-draggable="false"
                        :is-resizable="false"
                        :is-mirrored="false"
                        :vertical-compact="true"
                        :margin="[10, 10]"
                        :use-css-transforms="true"
                        @layout-mounted="layoutMountedEvent"
                >

                    <grid-item v-for="item in data"
                           
                            :x="item.x"
                            :y="item.y"
                            :w="item.w"
                            :h="item.h"
                            :i="item.key"
                            :key="item.key">
                            <div class="griditem animate__animated "  :style="{'backgroundColor':item.color}"  @click="openWin(item)">
                                <i :class="item.fa" :style="item.iStyle"></i>
                                <div class="griditem_text" :style="item.textStyle">
                                    {{item.text}}
                                </div>
                                
                            </div>
                    </grid-item>
                
                </grid-layout>
            </div>
        </div>
        <div style="height:50px"></div>
        <!--metro-tile
            @click="handleClick($event)" 
            faceStyle="{'background-color': 'blue'}"
            >
        <div slot="front">
            front
        </div>
        <div slot="back">
            back
        </div>
        <div slot="top">
            top
        </div>
        <div slot="bottom">
            bottom
        </div>
    </metro-tile>
   
    <metro-tile
            @click="handleClick($event)" 
            faceStyle="{'background-color': 'blue'}"
            >
        <div slot="front">
            front
        </div>
        <div slot="back">
            back
        </div>
        <div slot="top">
            top
        </div>
        <div slot="bottom">
            bottom
        </div>
    </metro-tile-->
    </div>
</template>
<script>
//import MetroTile from 'vue-metro-tile';
import VueGridLayout from 'vue-grid-layout';
export default {
    components:{
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    data(){
        return{
            layout : [
            { x: 0, y: 0, w: 6, h: 8, i: '0' },
            { x: 6, y: 0, w: 3, h: 8, i: '1' },
            { x: 9, y: 0, w: 3, h: 8, i: '2' },
            { x: 0, y: 8, w: 3, h: 8, i: '3' },
            { x: 3, y: 8, w: 3, h: 8, i: '4' },
            { x: 6, y: 8, w: 6, h: 8, i: '5' },
            
            ],
            color:sessionStorage.getItem("color"),
            logo:sessionStorage.getItem("logo"),
            loading:true,
            title:'',
            modelId:'',
            data:[],
            titles:'',
            modelIds:'',
            oldPwd:'',
            newPwd:'',
            newPwd2:'',
            filenames:"",
            dialogVisible:false,
            isApp:"N",
            showData:false,
            colHeight:30,
            username:localStorage.getItem("username"),
            context:null,
            w:0,
            h:0,
            snows:[],
            count:200
        }
    },

    created(){
       
        // console.log(this.$route.query.titles);
        if(this.$route.query.title){
            this.title=this.$route.query.title;
            //sessionStorage.setItem("title",this.title);
        }
        //alert(this.title)
        if(!this.$route.query.title){
            this.title=sessionStorage.getItem("title")
        }
        if(this.$route.query.isApp){
            this.isApp=this.$route.query.isApp;
        }
        if(this.$route.query.filenames){
            this.filenames=this.$route.query.filenames;
        }
        document.title=this.title;
        
        document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
        this.loadData();
        sessionStorage.setItem("mainView","/mainMetro")
        let maxHeight=document.documentElement.clientHeight-300
        this.colHeight=maxHeight/16-5;
        
    },
    mounted(){
        const that = this

        window.onresize = () => {

            return (() => {

            //这里写要操作的函数

            let maxHeight=document.documentElement.clientHeight-300
            that.colHeight=maxHeight/16-5;

            })()
        }
        
        
    },
    watch:{
        modelId(val){
            this.loadData();
        }
    },
    methods:{
        draw(){
            this.context.clearRect(0,0,this.w,this.h)
            this.context.beginPath()
            for(var i=0; i<this.count;i++){
                var snow = this.snows[i]; 
                this.context.fillStyle ="rgb(255,255,255)" //设置雪花的样式
                this.context.shadowBlur=10;
                this.context.shadowColor="rgb(255,255,255)";
    
    
                //moveTo 移动到指定的坐标
                this.context.moveTo(snow.x,snow.y)
                // 使用canvas arc()创建一个圆形
                //x，y，r：圆的中心的x坐标和y坐标，r为半径
                //0,Math.PI * 2起始弧度和结束弧度
                
                this.context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
                
            }
            //画布填充
            this.context.fill()
            this.move()
        },
        move(){
            for (var i=0;i<this.count;i++){
                var snow =this.snows[i];
                snow.y +=(7-snow.r)/10 //从上往下飘落
                snow.x+=((5-snow.r)/10)//从左到右飘落
                if(snow.y>this.h){
                    this.snows[i]={
                        x:Math.random()*this.w,
                        y:Math.random()*this.h,
                        r:Math.random()*3,
                    }
                }
            }
        },
        changeActive($event){
            console.log("changeActive--------------")
            $event.currentTarget.className="griditem animate__animated animate__heartBeat";
            console.log($event.currentTarget.className)
        },
        removeActive($event){
            $event.currentTarget.className="griditem animate__animated";
        },
        layoutMountedEvent(data){
            console.log("layoutMountedEvent======================");
            console.log(data)
        },
        freshs(){
            location.reload()
        },
        loadData(){
            this.loading=true;
            
            let sef=this;
            let imgIp=localStorage.getItem("imgIp") 
            /**获取桌面模块，目前定义所有的模块显示，没有设置自主模块 */
            
           
            
            this.loading=false;
            
            let nav=JSON.parse(sessionStorage.getItem("childModel"));
            let datas=[]
            let datass=[];
            for(let i=0;i<nav.length;i++){
                let index=i+1;
                if(index>6){
                        index=index%6;
                }
                    
                let n=nav[i];
                // n.icon=imgIp+n.icon;
                n.classItem="img item"+index;
                n.x=parseInt(n.x);
                n.y=parseInt(n.y);
                n.w=parseInt(n.w);
                n.h=parseInt(n.h);
                
                n.i=""+i;
                datas.push(n);

                let notPre=n.notPre;
                if(notPre!="Y"){
                    datass.push(n);
                }
                
            }
           
            this.data=datas;
            this.showData=true;


            this.$nextTick(()=>{
                var canvas =document.getElementById("canvass")
                console.log("canvas====================")
                console.log(canvas)
                this.context = canvas.getContext("2d")  //2d 即指二维平面
                this.w =window.innerWidth
                this.h =window.innerHeight
                canvas.width = this.w;  //全局分布
                canvas.height =this.h; 
                var count =200 //雪花的个数
                this.snows=[] //雪花对象数组
                for (var i=0 ; i< count;i++){
                    this.snows.push({
                        x:Math.random()*this.w,    //Math.random()用于生成0～1的随机数
                        y:Math.random()*this.h,
                        r:Math.random()*3,
                    })
                }
                this.draw()
                    //每毫秒刷新一次
                setInterval(this.draw,100)
            });
           
        },
        openWin(item){
            
            let url="";
            if(item.url.indexOf("http")==-1&&item.isBlank!='Y'){
               
                if(item.url=="main"){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                
                    url="/main";
                    
                }else if(item.url.indexOf("tabMain")!=-1){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    let key=item.key;
                    if(filename)
                        url= "/byg/tabMain?title="+item.text+"&filename="+filename+"&isDesktop="+item.isDesktop+"&isMain=Y"
                    else
                        url= item.url+"&title="+item.text+"&isDesktop="+item.isDesktop+"&isMain=Y"
                }else if(item.url.indexOf("list")!=-1){
                
                    let key=item.key;
                    url=item.url.indexOf("?")==-1 ? item.url+"?key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey:item.url+"&key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey;
                }else if(item.url!=''){
                    this.titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    //alert(item.url);
                   url=item.url.indexOf("?")==-1 ? item.url+"?title="+item.text+"&filename="+filename:item.url+"&title="+item.text+"&filename="+filename;
                }else{
                    let titles=this.titles+","+item.text;
                    this.modelIds=this.modelIds+","+item.id;
                    let filename=item.filename;
                    let key=item.key;
                    url= "/byg/tabMain?title="+item.text+"&filename="+filename+"&isDesktop="+item.isDesktop+"&isMain=Y"
                }
                if(url.indexOf("main?")!=-1){
                    this.title=item.text;
                    if(this.isApp=="Y"){
                        this.data=item.children
                    }
                }else{
                    this.$router.push({path:url});
                }
            }else{
                window.open(item.url, "_blank");
            }
             
            
        },
        returns(){
            
           let titles=this.titles.split(",")
           this.title=titles[0];
           this.modelId="-1";
           
        },
        backs(){
            this.$router.back()
        },
        logout(){
            this.$router.push({path:"/login?sCode="+localStorage.getItem("sCode")+"&isApp="+this.isApp+"&filenames="+this.filenames+"&mainType=mainMetro&logout=Y&isYtj="+sessionStorage.getItem("isYtj")});
            sessionStorage.setItem("token","");
            localStorage.setItem("username","");
            localStorage.setItem("userId","");
        },
        updatePwd(){
            this.oldPwd="";
            this.newPwd2="";
            this.newPwd="";
            this.dialogVisible=true;

        },
        updatePwdHt(){
            let isOk=true;
            if(this.newPwd==''){
                isOk=false;
                this.$alert("密码不能为空", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(this.newPwd!=this.newPwd2&&isOk){
                isOk=false;
                this.$alert("两次密码不一致，请检查", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
            if (!pwdRegex.test(this.newPwd)&&isOk) {
                isOk=false;
                this.$alert("密码必须包含字母和数字，并且要大于8位数", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(isOk){
                 this.$post("api","api/login/updatePwd",{oldPwd:this.oldPwd,newPwd:this.newPwd}).then(data=>{
                     this.$alert(data[0].msg, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            if(data[0].status=="+OK"){
                                this.dialogVisible=false;
                            }
                        }
                    });
                     
                })
            }
        }
    }
}
</script>
<style   scoped>
    .mainMetro{
        width:100%;
        height:100VH;
        background-image: url('../assets/img/bg/bgnew2.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
    }
    .griditem:hover {
        -webkit-animation: bounce 1s;
        animation: bounce 1s;
        font-weight:bold;
    }
    .griditem{
        width:100%;
        height:100%;
        color:#fff;
        font-size:calc(100vw * 20 / 1280);;
        padding:10px;
        display:flex;
        flex-direction: column;
        cursor:pointer;
    }
    .griditem i{
        font-size:calc(100vw * 80 / 1280);
        flex:1;
        padding-top:calc(100vw * 20 / 1280);
        text-align:center;
    }
    .griditem_text{
        height:60px;
    }
    .headers{
        color:#fff;
        font-size:calc(100vw * 58 / 1280);;
        font-weight:bold;
        text-align:center;
        padding:30px;
    }
    .contents{
        width:80%;
    
        margin-left:10%;
        flex:1;
    }
    .header_title{
        height:80
    }
    .users{
        color:#fff;
        position:absolute;
        right:50px;
        top:50px;
    }
</style>